<template>
	<div>

		
		<!-- <v-touch  
			v-on:pinchstart="start"
			v-on:pinchend="end"
			v-on:pinchmove="move"
		> -->
  		<div ref="allseat" class="mb60" style=" position: absolute;" 
  		v-bind:style="{
  			'transform' : 'scale(' + bili + ',' + bili + ')', 
  			'top' : top + 'px',
  			'left' : left + 'px',
  		}">
  		<flexbox class="mt10 dlq" v-for="(row, index) in seatarr" >
  			<flexbox-item class="rowlabel">
  				第{{index+1}}排
  			</flexbox-item>
	      	<flexbox-item v-for="seat in row" class="text-center seat"
	      	v-bind:style="{ 'background-color' : seat.color }"
	      	v-bind:class="{ 'active': seat.select }"
	      	@click.native="chooseSeat(seat)"
	      	>
	      		{{seat.label}}
	      	</flexbox-item>
	    </flexbox>
	    </div>
	    <!-- </v-touch> -->

	    <flexbox :gutter="0" wrap="wrap" class="chooseinfo">

	    	<flexbox-item :span="1/2" v-for="(seat, index) in chooseseatarr"
	    	class="text-center"
	    	>
	    		<div class="chooseseat">
	    			第 {{seat.y+1}} 排 {{seat.label}} 座 <span> ¥ {{seat.price}}</span>
	    			<yd-icon name="error-outline" color="#FF685D" size="15px"
	    			@click.native="delChoosedSeat(seat)"
	    			></yd-icon>
	    		</div>
  				
  			</flexbox-item>
	    </flexbox>

	    <flexbox class="controller">
  			<flexbox-item>
  				<range 
  				:min="0.1" :max="1" :step="0.1" :decimal="true"
  				v-model="bili" @on-change="onChange"></range>
  			</flexbox-item>
  		</flexbox>


  		
	</div>
</template>

<script>

import { mapGetters } from 'vuex';
import { XButton, Range, Group, GroupTitle, Cell } from 'vux'

export default {
	name: 'seat',
		data () {
		return {
		  	'seatarr' : [],
		  	'chooseseatarr' : [],
		  	'chooseseatobj' : {},
		  	'bili': 1,
		  	'top' : 0,
		  	'left' : 0,

		  	x1 : 0,
		  	y1 : 0,

		  	x2 : 0,
		  	y2 : 0,

		  	d : 0,

		}
	},

	computed : {
		...mapGetters([
			'company_code', 
			'userdata',
		]),

		step () {

			var width = window.getComputedStyle(this.$refs.allseat).width;
			var height = window.getComputedStyle(this.$refs.allseat).height;

			var w = parseFloat(width.split('px')[0]);
			var h = parseFloat(height.split('px')[0]);

			var stepW = w * -0.5;
			var stepH = h * -0.5;

			console.log(stepW);
			console.log(stepH);

			return {
				w : stepW,
				h : stepH,
			}

		},
	},

	components: {
	    Range,
	    //Group,
	    //GroupTitle,
	    //Cell,
	    //XButton
	},

	methods : {
		
		chooseSeat (item) {
			if(item.price == undefined){
				return;
			}
			console.log(item);

			item.select = !item.select;

			if(item.select){
				this.chooseseatarr.push(item);
			}else{
				this.delChoosedSeat(item);
			}

		},

		delChoosedSeat (item) {

			for(var i = 0; i < this.chooseseatarr.length; i++){
				var tmp = this.chooseseatarr[i];
				if(item.id == tmp.id){
					this.chooseseatarr.splice(i,1); 
					item.select = false;
					break;
				}
			}
		},


		onChange (val) {
			console.log(val);
			this.left = (1 - this.bili) * this.step.w;
			this.top = (1 - this.bili) * this.step.h;
		},


		start (data) {
			console.log('start');
			console.log(data);

			this.x1 = data.pointers[0].clientX;
			this.y1 = data.pointers[0].clientY;

			this.x2 = data.pointers[1].clientX;
			this.y2 = data.pointers[1].clientY;

			this.d = Math.sqrt(Math.pow((this.x1 - this.x2), 2) + Math.pow((this.y1 - this.y2), 2));
			
		},

		end (data) {
			console.log('end');
			console.log(data);
		},


		move (data) {
			console.log('move');
			console.log(data);

			var x1 = data.pointers[0].clientX;
			var y1 = data.pointers[0].clientY;

			var x2 = data.pointers[1].clientX;
			var y2 = data.pointers[1].clientY;


			var d = Math.sqrt(Math.pow((x1 - x2), 2) + Math.pow((y1 - y2), 2));


			this.bili = d / this.d;

			//this.left = this.bili * this.step.w;
			//this.top = this.bili * this.step.h;
			
		},
	},

	mounted () {
		
		for(var i = 0; i < 15; i++){
			var arr = [];
			for(var j = 0; j < 20; j++){
				var seat = {
					'id' : i+'-'+j,
					'x' : j,
					'y' : i,
					'label' : j+1,
					'select' : false,
				}
				arr.push(seat);
			}
			this.seatarr.push(arr);
		}

		this.seatarr[2][4].price = 100;
		this.seatarr[2][4].color = '#FF5E53';
		this.seatarr[3][4].price = 100;
		this.seatarr[3][4].color = '#FF5E53';
		this.seatarr[4][4].price = 100;
		this.seatarr[4][4].color = '#FF5E53';
		this.seatarr[5][4].price = 40;
		this.seatarr[5][4].color = '#FF5E53';

	}
}
</script>

<style scoped>

.dlq1 {
	width: 100px;
	height: 100px;
	background-color: #999;
	position: absolute;
}
.seat {
	/*width: 50px;
	height: 50px;*/
	padding-top: 7px;
	background-color: #ddd;
	min-width: 30px !important;
	min-height: 30px !important;
}

.rowlabel {
	min-width: 50px !important;
	text-align: center;
}

.active {
	background-color: #999 !important;
	color: #fff;
}

.chooseinfo {
	width: 100%;
	background-color: #eee;
    position:fixed;
    bottom:50px;
    z-index: 999;
    /*min-height: 50px;*/
}

.controller {
	width: 100%;
	height: 50px;
	background-color: #eee;
    position:fixed;
    bottom:0;
    z-index: 999;
}

.chooseseat {
	height: 40px;
	padding-top: 10px;
}

</style>
